<template>
  <div class="app-container">
    <el-row>
      <el-col :span="2">
        <label class="row-label">业务操作</label>
      </el-col>
      <el-col :span="22" class="align-right">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleInquire"
          >
            {{ $t('table.detailFilter') }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            class="refresh-button"
            @click="handleRefresh"
          >
            {{ $t('table.refresh') }}
          </el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <splitpanes
      class="default-theme"
      horizontal
      :style="{ height: `${commonLayoutHeight}px` }"
    >
      <pane :size="50">
        <client-table
          ref="table"
          v-loading="loading"
          style="height: 100%;"
          :columns="columns"
          :data="rowData"
          show-summary
          @row-click="handleClick"
        />
      </pane>
      <pane :size="50">
        <server-table
          ref="mainTable"
          v-loading="mainLoading"
          style="height: 100%;"
          :columns="mainColumns"
          :row-data="mainData"
          :pagination-page-size="500"
          show-summary
        />
      </pane>
    </splitpanes>
    <ly-dialog
      v-model="visible"
      :title="$t('route.MoveTable') + '--' +'查询'"
      width="750px"
      top="10vh"
      :modal="true"
      :modal-append-to-body="false"
      :show-confirm-cancel-button="false"
      :before-close="handleCancel"
    >
      <template #operation>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="handleConfirm"
        >
          {{ $t('table.detailFilter') }}
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-delete"
          class="deleted-button"
          @click="handleClear"
        >
          清空
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-close"
          class="pause-button"
          @click="handleCancel"
        >
          {{ $t('table.cancel') }}
        </el-button>
      </template>
      <ly-form
        ref="form"
        size="mini"
        label-width="80px"
        :model="temp"
        :rules="rules"
      >
        <el-row>
          <el-col>
            <el-form-item
              label="订单日期"
              prop="dateOrderRange"
            >
              <el-date-picker
                v-model="temp.dateOrderRange"
                value-format="yyyy-MM-dd"
                class="search-date-picker"
                type="daterange"
                align="center"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="道具名称"
              prop="itemName"
            >
              <el-input
                v-model="temp.itemName"
                placeholder="道具名称"
                prefix-icon="el-icon-search"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="进展"
              prop="progress"
            >
              <el-select
                v-model="temp.progress"
                clearable
                placeholder="请选择进展"
              >
                <el-option
                  v-for="item in progressList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </ly-form>
    </ly-dialog>
  </div>
</template>

<script>
import { Pane, Splitpanes } from 'splitpanes'
import { mapState } from 'vuex'
import { getList } from '@/api/moveBrick'
import { getBasisList } from '@/api/basic-data'
import { getConstantByType } from '@/utils/index'

export default {
  name: 'MoveTable',
  components: {
    Pane,
    Splitpanes
  },
  data() {
    return {
      columns: [
        {
          headerName: '利润率',
          field: 'profitRate'
        },
        {
          headerName: '采购日期',
          field: 'orderDate'
        },
        {
          headerName: 'buff出售价格(元)',
          field: 'sellingPrice',
          showSummary: true
        },
        {
          headerName: '实际利润(元)',
          field: 'actualProfit',
          showSummary: true
        },
        {
          headerName: 'buff卖出价格($)',
          field: 'buffPrice',
          showSummary: true
        },
        {
          headerName: 'steam求购价格($)',
          field: 'steamPrice',
          showSummary: true
        },
        {
          headerName: '成本',
          field: 'costInput',
          showSummary: true
        },
        {
          headerName: '卡价充值价格',
          field: 'rechargePrice'
        }
      ],
      mainColumns: [
        {
          headerName: '审核',
          field: 'checked',
          type: 'booleanColumn'
        },
        {
          headerName: '订单号',
          field: 'cartonOrderNO'
        },
        {
          headerName: '采购日期',
          field: 'orderDate'
        },
        {
          headerName: '进展',
          field: 'progress',
          type: 'selectionColumn',
          editable: (params) => {
            return params.data.canModify === 1
          },
          cellStyle: (params) => {
            return { color: 'black' }
          },
          cellEditorParams: {
            list: [],
            props: { label: 'name', value: 'id' }
          }
        },
        {
          headerName: '买入道具名称',
          field: 'itemName'
        },
        {
          headerName: 'buff出售价格(元)',
          field: 'sellingPrice',
          showSummary: true
        },
        {
          headerName: '实际利润(元)',
          field: 'actualProfit',
          showSummary: true
        },
        {
          headerName: 'buff卖出价格($)',
          field: 'buffPrice',
          showSummary: true
        },
        {
          headerName: 'steam求购价格($)',
          field: 'steamPrice',
          showSummary: true
        },
        {
          headerName: '卡价充值价格',
          field: 'rechargePrice'
        },
        {
          headerName: '利润率(%)',
          field: 'profitMargin'
        },
        {
          headerName: '创建时间',
          field: 'createDate'
        }
      ],
      rowData: [],
      constants: [],
      mainData: {},
      temp: {
        dateOrderRange: [],
        beginDate: '',
        endDate: '',
        itemName: '',
        progress: ''
      },
      resetTemp: {
        dateOrderRange: [],
        beginDate: '',
        endDate: '',
        itemName: '',
        progress: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 状态
      progressList: [],
      orderManageList: [
        {
          name: '审核',
          command: 'check'
        },
        {
          name: '取消审核',
          command: 'uncheck'
        }
      ],
      rules: {
        // dateOrderRange: [{ validator: validate, required: true, message: ' ', trigger: 'change' }]
      },
      timer: null,
      visible: false,
      loading: false,
      mainLoading: false
    }
  },
  computed: {
    ...mapState('app', {
      commonLayoutHeight: state => state.height.clientHeight - 210
    })
  },
  created() {
    this.getConstant()
    this.getPageData()
  },
  methods: {
    handleInquire() {
      this.visible = true
    },
    // 查询
    handleConfirm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.getPageData()
          this.visible = false
        } else {
          this.$alert('有必选项未填', '警告', {
            confirmButtonText: '确定'
          })
          return false
        }
      })
    },
    // 清空
    handleClear() {
      this.temp = Object.assign({}, this.resetTemp)
    },
    // 关闭
    handleCancel() {
      this.visible = false
    },
    // 表格数据
    async getPageData() {
      this.loading = true
      const params = Object.assign({}, this.temp)
      if (params.dateOrderRange) {
        params.beginDate = params.dateOrderRange[0]
        params.endDate = params.dateOrderRange[1]
      }
      delete params.dateOrderRange
      const result = await getList('getSummarySteam', params)
      if (result.code === 200) {
        this.rowData = result.data.pageItems
        setTimeout(() => {
          this.loading = false
          this.$refs.table.setColumnWidth()
          if (this.rowData.length > 0) {
            this.$refs.table.selectRow(this.rowData[0])
            this.$refs.table.redrawRows()
            this.handleClick(this.rowData[0])
          } else {
            this.mainData = {}
          }
        }, 200)
      }
    },
    async handleClick(row) {
      this.mainLoading = true
      const params = Object.assign({}, this.temp)
      params.beginDate = row.orderDate
      params.endDate = row.orderDate
      delete params.dateOrderRange
      const result = await getList('getSteam', params)
      if (result.code === 200) {
        this.mainData = result.data
        setTimeout(() => {
          this.mainLoading = false
          this.$refs.table.setColumnWidth()
        }, 200)
      }
    },
    // 常量
    async getConstant() {
      const result = await getBasisList('constant')
      if (result.code === 200) {
        this.constants = JSON.parse(JSON.stringify(result.data.pageItems))
        this.progressList = await getConstantByType(this.constants, 1)
        const tableColumnDef = this.mainColumns.find(column => column.field === 'progress')
        tableColumnDef.cellEditorParams.list = this.progressList
      }
    },
    // 刷新
    handleRefresh() {
      this.getPageData()
    }
  }
}
</script>

